<template>
  <div class="row items-center justify-between">
    <div class="col-4">
      <content-box title="设备信息" style="height: 200px" :loading="totalLoading">
        <div class="flex chart-box full-width">
          <div class="chart flex items-center justify-center">
            <div class="flex items-center">
              <div class="icon">
                <q-icon name="iconfont icontubiao-126" style="font-size: 26px;" color="primary" />
              </div>
              <div>
                <div style="font-size: 36px">{{ dataTotal.allDeviceCount }}</div>
                <div class="font-size-14 text-grey margin-t-10">设备总数</div>
              </div>
            </div>
          </div>
          <div class="bor"/>
          <div class="chart flex items-center justify-center">
            <div class="flex items-center">
              <div class="icon" style="background-color:rgba(24, 215, 127, .2)">
                <q-icon name="iconfont icontubiao2-90" style="font-size: 26px;color: #18D77F" />
              </div>
              <div>
                <div style="font-size: 36px">{{ dataTotal.connectDeviceCount }}</div>
                <div class="font-size-14 text-grey margin-t-10">设备联网总数</div>
              </div>
            </div>
          </div>
        </div>
      </content-box>
    </div>
    <div class="padding-l-24 col-8">
      <content-box title="机台信息" style="height: 200px" :loading="loading">
        <div class="padding-l-20 padding-r-20 flex column justify-between full-height">
          <div class="flex items-start justify-between">
            <div style="width: 80px">
              机台状态：
            </div>
            <div class="flex-1 flex items-start justify-between" v-if="statusOptions.length">
              <template v-for="(item, index) in statusOptions">
                <div :key="index" v-if="index < 5" style="min-width: 130px">
                  <div class="flex items-center">
                    <div class="status" :style="{'background': item.color}"/>
                    <div class="font-size-14 text-grey">{{item.label}}设备总数</div>

                    <div class="cursor-pointer margin-l-10">
                      <q-icon name="iconfont icontubiao-72" class="font-18 text-grey"/>
                      <q-tooltip max-width="300px">{{item.label}}：{{item.tip}}</q-tooltip>
                    </div>
                  </div>
                  <div class="padding-l-20" style="margin-top: 15px;font-size: 24px">
                    {{ item.count }}
                  </div>
                </div>
              </template>
            </div>
          </div>
          <div class="flex items-start justify-between" v-if="hasCraft || hasWork">
            <div style="width: 80px">
              管理状态：
            </div>
            <div class="flex-1 flex items-start justify-between" v-if="statusOptions.length">
              <div v-if="hasCraft" style="min-width: 130px">
                <div class="flex">
                  <div class="status" :style="{'background': statusOptions[5].color}"/>
                  <div class="font-size-14 text-grey">{{statusOptions[5].label}}设备总数</div>
                </div>
                <div class="padding-l-20" style="margin-top: 15px;font-size: 24px">
                  {{ statusOptions[5].count }}
                </div>
              </div>
              <template v-for="(item, index) in statusOptions">
                <div :key="index" v-if="index > 5 && hasWork" style="min-width: 130px">
                  <div class="flex">
                    <div class="status" :style="{'background': item.color}"/>
                    <div class="font-size-14 text-grey">{{item.label}}设备总数</div>
                  </div>
                  <div class="padding-l-20" style="margin-top: 15px;font-size: 24px">
                    {{ item.count }}
                  </div>
                </div>
              </template>
              <div style="width: 130px"/>
              <div style="width: 130px"/>
            </div>
          </div>
        </div>
      </content-box>
    </div>
  </div>
</template>

<script>
import contentBox from 'src/pages/status-monitor-v3/components/status-overview/content-box'
import roleMenuApi from 'src/boot/system/role-menu'
import { mapGetters } from 'vuex'
import _ from 'lodash'
import { getCountDevice, getRealTime } from 'src/boot/home/home-new'
export default {
  name: 'device-info',
  components: {
    contentBox
  },
  data () {
    return {
      title: '设备信息',
      statusOptions: [],
      tips: [
        '网关与设备通讯正常，并且设备正在运行',
        '网关与设备通讯正常，但设备没有运行',
        '网关与设备无连接，但与服务器通讯正常',
        '网关与云端服务器长时间无通讯',
        '网关与设备通讯正常，且设备产生了报警信号'
      ],
      dataTotal: {
        allDeviceCount: 0,
        connectDeviceCount: 0
      },
      totalLoading: false,
      loading: false,
      hasCraft: false, // 生产模块权限
      hasWork: false // 维保模块权限
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'statusList'])
  },
  created () {
    this.hasCraftMenu()
  },
  methods: {
    getData () {
      this.init()
      this.totalLoading = true
      this.loading = true
      getCountDevice().then(res => {
        this.dataTotal = res
      }).finally(() => {
        this.totalLoading = false
      })
      getRealTime().then(res => {
        const data = this.initRealTimeStatus(res)
        this.$set(this.statusOptions[0], 'count', data.process)
        this.$set(this.statusOptions[1], 'count', data.stop)
        this.$set(this.statusOptions[2], 'count', data.breaks)
        this.$set(this.statusOptions[3], 'count', data.offLine)
        this.$set(this.statusOptions[4], 'count', data.alert)
        this.$set(this.statusOptions[5], 'count', data.changeLine)
        this.$set(this.statusOptions[6], 'count', data.fault)
        this.$set(this.statusOptions[7], 'count', data.repair)
      }).finally(() => {
        this.loading = false
      })
    },
    // 重构实时状态分布
    initRealTimeStatus (info) {
      let realTimeStatus = {
        process: 0, // 加工
        stop: 0, // 停机
        breaks: 0, // 断开
        offLine: 0, // 离线
        alert: 0, // 报警
        changeLine: 0, // 换线
        fault: 0, // 故障
        repair: 0 // 维修
      }

      for (let key in info) {
        _.indexOf(info[key], 0) !== -1 && (++realTimeStatus.stop)
        _.indexOf(info[key], 1) !== -1 && (++realTimeStatus.process)
        _.indexOf(info[key], 51) !== -1 && (++realTimeStatus.process)
        _.indexOf(info[key], 2) !== -1 && (++realTimeStatus.offLine)
        _.indexOf(info[key], 3) !== -1 && (++realTimeStatus.breaks)
        _.indexOf(info[key], 4) !== -1 && (++realTimeStatus.alert)
        _.indexOf(info[key], 5) !== -1 && (++realTimeStatus.changeLine)
        _.indexOf(info[key], 6) !== -1 && (++realTimeStatus.fault)
        _.indexOf(info[key], 7) !== -1 && (++realTimeStatus.repair)
      }
      return realTimeStatus
    },
    hasCraftMenu () {
      // 从状态中获取租户Id
      const tenantId = this.userInfo.tenant_id
      // 获取租户所购买的所有系统视图
      roleMenuApi.getCompanyView(tenantId, 'pc').then(res => {
        this.hasCraft = _.indexOf(res.data, this.Enums.SYS_PERMISSION.CRAFT_MENU.value) !== -1
        this.hasWork = _.indexOf(res.data, this.Enums.SYS_PERMISSION.WORK_MENU.value) !== -1
      })
    },
    init () {
      // 冲状态枚举中取出机场状态数组
      const newArr = Object.entries(this.Enums.MACHINES_STATUS)
        .map(entry => {
          return {
            value: entry[1].value,
            label: entry[1].desc,
            color: entry[1].color,
            count: 0
          }
        })
      // this.statusList.slice(5, this.statusList.length - 1)
      this.statusOptions = _.union(_.cloneDeep(this.statusList), newArr.slice(5, newArr.length))
    }
  }
}
</script>

<style scoped lang="stylus">
.padding-l-24{
  padding-left 24px
}
.margin-b-24{
  margin-bottom 24px
}
.content-container{
  margin-right -24px
  padding-right 24px
}
.chart-box{
  height 100%
  .bor{
    margin 30px 20px
    width 1px
    background-color #D3D3D3
    height calc(100% - 60px)
  }
  .chart{
    width calc((100% - 41px) / 2)
  }
}
  .icon{
    border-radius 50%
    overflow hidden
    height 56px
    width 56px
    background-color rgba(95, 119, 253, .2)
    margin-right 20px
    line-height 56px
    text-align center
  }
  .status{
    width 12px
    height 12px
    border-radius 50%
    margin-right 8px
  }
  .text-grey{
    color #666666
  }
</style>
